<template>
	<el-form :inline="true" :model="formData" class="demo-form-inline">
		<el-form-item>
			<el-input v-model="formData.nickName" placeholder="请输入用户名" />
		</el-form-item>
		<el-form-item>
			<el-input v-model="formData.tel" placeholder="请输入手机号" />
		</el-form-item>
		<el-form-item>
			<el-input v-model="formData.email" placeholder="请输入邮箱" />
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="onQuery">查询</el-button>
		</el-form-item>
	</el-form>
	<el-table :data="tableData" style="width: 100%">
		<el-table-column fixed prop="nickName" label="用户名" width="120" />
		<el-table-column prop="tel" label="联系方式" width="120" />
		<el-table-column prop="email" label="邮箱" width="120" />
		<el-table-column
			prop="registerTime"
			label="注册时间"
			width="200"
			:formatter="formatter"
		/>

		<el-table-column label="角色信息" width="300">
			<template #default="scope">
				{{ scope.row.roles.map((item) => item.description).join('/') }}
			</template>
		</el-table-column>
		<el-table-column fixed="right" label="操作">
			<template #default="scope">
				<el-button
					type="primary"
					size="small"
					@click="edit(scope.row.id)"
					>编辑角色</el-button
				>
			</template>
		</el-table-column>
	</el-table>
	<br />
	<Pagex @on-change="callUserApi" v-model="pageData"></Pagex>

	<el-drawer v-model="show">
		<template #header>
			<h4>编辑角色</h4>
		</template>

		<template #default>
			<el-row>
				<el-col :span="12">
					<div>角色列表</div>
				</el-col>
				<el-col :span="12">
					<div style="float: right">
						<el-button
							type="primary"
							@click="addRole()"
							size="small"
							>添加角色</el-button
						>
					</div>
				</el-col>
			</el-row>
			<el-table :data="rolesInfo" style="width: 100%">
				<el-table-column
					fixed
					prop="description"
					label="角色"
					width="200"
				>
					<template #default="scope">
						<el-button
							with="100%"
							size="small"
							:type="hasOrNo(scope.row.id) ? 'success' : 'info'"
							@click="
								changeRole(scope.row.id, hasOrNo(scope.row.id))
							"
							>{{ scope.row.description }}</el-button
						>
					</template>
				</el-table-column>
			</el-table>
		</template>
	</el-drawer>

	<el-dialog v-model="roleShow" title="添加" width="35%">
		<el-form label-position="left">
			<el-form-item label="角色名称">
				<el-input v-model="roleInfo.name" />
			</el-form-item>
			<el-form-item label="角色描述">
				<el-input v-model="roleInfo.description" />
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button type="success" @click="insertRole"> 添加 </el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup>
	import { userApi, roleApi } from '@/api';
	import { ref, onMounted, reactive } from 'vue';
	import { ElMessage } from 'element-plus';
	import dayjs from 'dayjs';
	const tableData = ref([]);
	const show = ref(false);
	const userInfo = ref({});
	const rolesInfo = ref([]);
	const roleShow = ref(false);
	const roleInfo = reactive({
		name: '',
		description: '',
	});
	const formData = reactive({
		nickName: '',
		tel: '',
		email: '',
	});
	const pageData = reactive({
		total: 0,
		pageSize: 5,
		pageNum: 1,
	});
	const edit = (id: any) => {
		getUserInfo(id);
		callroleApi();
		show.value = true;
	};
	const addRole = () => {
		roleShow.value = true;
	};
	const hasOrNo = (id) => {
		return userInfo.value.roles.map((i) => i.id).indexOf(id) != -1;
	};
	const changeRole = (roleId, has) => {
		let userId = userInfo.value.id;
		userApi.editrole.call({ roleId, userId, has }).then(() => {
			edit(userId);
			callUserApi();
			ElMessage.success('操作成功');
		});
	};
	const getUserInfo = (id: any) => {
		userApi.list.call({ id }).then((res: any) => {
			userInfo.value = res[0];
		});
	};

	onMounted(() => {
		callUserApi();
	});

	const callUserApi = () => {
		let pageNum = pageData.pageNum;
		let pageSize = pageData.pageSize;
		userApi.list
			.call({
				...formData,
				pageNum,
				pageSize,
			})
			.then((res: any) => {
				pageData.total = res.total;
			
				
				tableData.value = res.items;
			});
	};
	const callroleApi = () => {
		roleApi.select.call().then((res: any) => {
			rolesInfo.value = res;
		});
	};

	const onQuery = () => {
		callUserApi();
	};
	const formatter = (
		_row: any,
		_column: any,
		cellValue: any,
		_index: any
	) => {
		return dayjs(cellValue).format('YYYY-MM-DD HH:mm');
	};
	const insertRole = () => {
		roleApi.insert.call(roleInfo).then(() => {
			callroleApi();
			roleShow.value = false;
			ElMessage.success('角色添加成功');
			roleInfo.name = '';
			roleInfo.description = '';
		});
	};
</script>